<template>
	<div class="assess_record_part" ref="assess" v-loading="loading">
		<el-empty v-if="list.length == 0" :image-size="150" description="暂无数据" />
		<table width="100%" cellpadding="10px">
			<tr v-for="item in list" :key="item.id">
				<td>
					<div class="to_center">
						<div style="font-weight: 700;font-size: 24px">{{ item.crAreaName }}</div>
						<el-tag size="large" effect="dark" :type="item.promoteAction==0?'danger':'info'">{{ item.promoteAction==0?'非提升行动':'提升行动' }}</el-tag>
					</div>
				</td>
				<td>
					<div class="to_center">
						<div>申请档案</div>
						<div class="status_part" :class="judgeStatus(item.applyState,'css')">
                            <el-icon size="30">
                                <SuccessFilled v-if="item.applyState==2" />
								<RemoveFilled v-if="item.applyState==1" />
								<CircleCloseFilled v-if="item.applyState==0" />
                            </el-icon>
                            {{ item.applyStateLabel }}
                        </div>
					</div>
				</td>
				<td>
					<div class="to_center">
						<div>评估档案</div>
						<div class="status_part" :class="judgeStatus(item.assessState,'css')">
                            <el-icon size="30">
								<SuccessFilled v-if="item.assessState==2" />
								<RemoveFilled v-if="item.assessState==1" />
								<CircleCloseFilled v-if="item.assessState==0" />
                            </el-icon>
                            {{ item.assessStateLabel }}
                        </div>
					</div>
				</td>
				<td>
					<div class="to_center">
						<div>签约档案</div>
						<div class="status_part" :class="judgeStatus(item.signState,'css')">
                            <el-icon size="30">
								<SuccessFilled v-if="item.signState==2" />
								<RemoveFilled v-if="item.signState==1" />
								<CircleCloseFilled v-if="item.signState==0" />
                            </el-icon>
                            {{ item.signStateLabel }}
                        </div>
					</div>
				</td>
				<td>
					<div class="to_center">
						<div>改造档案</div>
						<div class="status_part" :class="judgeStatus(item.remouldState,'css')">
                            <el-icon size="30">
								<SuccessFilled v-if="item.remouldState==2" />
								<RemoveFilled v-if="item.remouldState==1" />
								<CircleCloseFilled v-if="item.remouldState==0" />
                            </el-icon>
                            {{ item.remouldStateLabel }}
                        </div>
					</div>
				</td>
				<td>
					<div class="to_center">
						<div>验收档案</div>
						<div class="status_part" :class="judgeStatus(item.acceptanceState,'css')">
                            <el-icon size="30">
								<SuccessFilled v-if="item.acceptanceState==2" />
								<RemoveFilled v-if="item.acceptanceState==1" />
								<CircleCloseFilled v-if="item.acceptanceState==0" />
                            </el-icon>
                            {{ item.acceptanceStateLabel }}
                        </div>
					</div>
				</td>
				<td><button @click="openDetail(item)">查看详情</button></td>
			</tr>
		</table>
		<div class="page_part">
			<AplidPaginate class="pageinate mt10" background v-bind="pageReac" small @change="onPageChange" />
		</div>
		<!-- 能力评估详情弹窗 -->
		<AplidDialog width="65%" v-model="dialogShow" title="能力评估-详情">
			<Archives :nowRowData="detailData"></Archives>
		</AplidDialog>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import apiMod from '@/apiMod/index'
import AplidPaginate from '@/components/AplidCrud/src/AplidPaginate'
import AplidDialog from '@/components/AplidDialog/index.vue'
import { detailConfig } from '@/views/datacenter/business/elderlyAssessment/config'
import DetailPage from '@/views/aplid/DetailPage/index.vue'
import Archives from '@/views/datacenter/business/familyBedConstruct/components/Archives/index.vue'
import { SuccessFilled,RemoveFilled,CircleCloseFilled } from '@element-plus/icons-vue'
let pageReac = ref({
	current: 1,
	size: 5,
	total: 0,
})
let assess = ref()
let loading = ref(false)
let props = defineProps({
	nowRowData: {
		type: Object,
		default: () => ({}),
	},
})
let dialogShow = ref(false)
let list = ref([])
// 判断颜色
const judgeStatus = (status,type) =>{
    if(status==0){
		if(type=='css'){
			return 'error'
		}else {
			return 'CircleCloseFilled'
		}
    }else if(status==1){
		if(type=='css'){
			return 'doing'
		}else {
			return 'RemoveFilled'
		}
        
    }else if(status == 2){
		
		if(type=='css'){
			return 'success'
		}else {
			return 'SuccessFilled'
		}
    }
}
const getInitData = () => {
	let params = {
		idCard: props.nowRowData.idCard,
		isWithAuth: 0,
		pageParaPO: pageReac.value,
	}
	apiMod.dpFamilyConstructionArchives_page(params).then((res) => {
		if (res.code == 0) {
			pageReac.value.total = res.data.total
			list.value = res.data.records
			loading.value = false
		} else {
			loading.value = false
		}
	})
}
const stateDicData = [
	{ label: '未完成', value: '0', type: 'danger' },
	{ label: '进行中', value: '1', type: 'info' },
	{ label: '已完成', value: '2', type: 'success' },
]
let assessStandard = ref()
let accessLevel = ref()
// 获取字典
const getDictData = () => {
	loading.value = true
	apiMod
		.getDictItemList(['APPROVAL_STSTUS', 'LEVEL', 'ELDERLY_TYPE', 'ECONOMIC_SITUATION', 'COMMON_FLAG', 'ELDERLY_RELATIONSHIP', 'RESULT'])
		.then((res) => {
			if (res.code == 0) {
				//   assessStandard.value = res.data['ASSESS_STANDARD']
				//   accessLevel.value = res.data['ACCESS_LEVEL_COUNTRY']
				getInitData()
			}
		})
}
// 打开详情
let detailData = ref()
const openDetail = (item) => {
	dialogShow.value = true
	detailData.value = item
}
// 判断状态
const judgeTag = (data, value) => {
	if (data && (value || value == 0)) {
		value = String(value)
		let obj = data.find((el) => {
			return (value = String(el.value))
		})
		if (obj) {
			return obj.remarks
		}
	}
}
getDictData()
const onPageChange = (data) => {
	pageReac.value = data
	getInitData()
}
</script>
<style scoped lang="scss">
.success{
    background-color:#E1F4EC;
    color:#08C272;
}
.doing{
    background-color: #f3d19e;
    color: #E6A23C;
}
.error{
    background-color: #fab6b6;
    color: #F56C6C;
}
.assess_record_part {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.page_part {
		align-self: flex-end;
	}
}
.scord_part {
	font-weight: 400;
	font-size: 32px;
	text-align: right;
	color: #1c1c28;
	margin-right: 5px;
}
.tag_part {
	width: 60px;
	height: 29px;
	line-height: 29px;
	text-align: center;
	background: #4787f0;
	font-weight: 400;
	font-size: 16px;

	color: #fff;
	border-radius: 3px;
}
td {
	// width: 15%;
}
button {
	width: 88px;
	height: 25px;
	border-radius: 4px;
	background: #0052d91a;
	border: 1px solid #0052d9;
	font-weight: 400;
	font-size: 16px;
	text-align: left;
	color: #0052d9;
	text-align: center;
	line-height: 25px;
	cursor: pointer;
}
.text_part {
	font-weight: 400;
	font-size: 16px;
	text-align: left;
	color: #000000e6;
}
.title_part {
	font-weight: 400;
	font-size: 16px;
	text-align: left;
	color: #a0a0a0;
}
.to_center {
	display: flex;
	flex-direction: column;
	// justify-content: center;
	align-items: center;
}
.to_center>div:first-child{
    margin-bottom: 14px;
    font-size: 16px;
}
.status_part{
    width: 104px;
    height: 34px;
    line-height: 34px;
    border-radius: 17px;
    
    font-weight: 400;
    font-size: 16px;
    text-align: center;
   
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
</style>
